<template>
  <div class="hot-ani-box">

    <el-row class="home-row" :gutter="10" >
        <el-row v-for="i in 2" :gutter="15" class="home-row">
          <el-col v-for="(item,index) in hotAnimalList.slice((i-1)*colNum,colNum*i)" :key="index" :span="24/colNum">
            <AnimalSimpleCard :value="item" class="hot-animal-card"></AnimalSimpleCard>
          </el-col>
        </el-row>
    </el-row>
  </div>
</template>

<script>
import AnimalSimpleCard from "@/components/animal/AnimalSimpleCard.vue";
export default {
  name: "HotAnimalBox",
  components:{AnimalSimpleCard},
  data() {
    return {
      colNum: 6,
      hotAnimalList: [
        {
          animal: {
            id: 1,
            name: "大白",
            sex: 1,
            image: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp478917080.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1682590812&t=162a77fd5008d5160ea8fbfec236a0da",

          },
          school: {
            schoolName: "北京大学",
          },
          campus: {
            name: "航空港校区"
          },
          area: {
            name: "16栋"
          }
        },
        {

          animal: {
            id: 2,
            sex: 0,
            name: "牛奶",
            image: "https://img1.baidu.com/it/u=1651849877,3929319560&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=888",
          },
          school: {
            schoolName: "北京大学",
          },
          campus: {
            name: "龙泉校区"
          },
          area: {
            name: "航空港校区 16栋"
          }
        },

      ]
    }
  }
}
</script>

<style scoped lang="less">
  .hot-ani-box{
    padding: 20px;
    .home-row{
      padding: 10px;
    }

    .home-carousel{
      width: 100%;
      border-radius: 10px;
    }
  }
</style>